<template>
    <div
        class="absolute w-full h-full top-0 left-0 flex justify-center items-center bg-[rgba(0,0,0,0.4)] backdrop-blur-sm select-none">
        <div class="w-[62rem] h-[42rem] box rounded-md relative">
            <!-- 个人信息标题 -->
            <div>
                <p class="absolute font-serif top-7 left-[27.8rem] text-amber-500 font-bold text-3xl tracking-widest">
                    个人信息
                </p>
                <button @click="emit(`showName`)"
                    class="absolute top-[3.8rem] left-[53rem] z-50 flex h-8 w-8 items-center justify-center rounded-full bg-orange-300 text-white hover:scale-110 transition-all shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000]">
                    <svg t="1724252642050" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="43079" width="20" height="20">
                        <path
                            d="M773.41 196.21c15.05-15.01 39.41-14.98 54.42 0.07 14.07 14.11 15.05 36.63 2.24 51.9l-2.25 2.44-577.2 577.2c-15.05 15.01-39.41 14.98-54.42-0.07-14.07-14.11-15.05-36.63-2.24-51.9l2.25-2.44 577.2-577.2z"
                            p-id="43080" fill="#ffffff"></path>
                        <path
                            d="M196.21 196.21c14.12-14.12 36.68-15.09 51.97-2.25l2.44 2.25 577.2 577.2c15.01 15.05 14.98 39.41-0.07 54.42-14.11 14.07-36.63 15.05-51.9 2.24l-2.44-2.25-577.2-577.2c-15.03-15.03-15.03-39.39 0-54.41z"
                            p-id="43081" fill="#ffffff"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="fixed w-[48.8rem] h-[29rem] rounded-md overflow-hidden" ref="barRef">
            <!-- 模型 -->
            <div ref="playerRef" class="absolute top-16 left-0 z-50">
                <img src="../assets/imgs/roleBg.jpg" class="-z-10 absolute w-72 scale-90 -top-[4.3rem] left-[2.8rem]" alt="">
                <!-- 名称 -->
                <div
                    class="font-mono z-50 min-w-40 text-center text-lg select-none absolute rounded-md bottom-12 left-28 px-4 py-2 font-bold shadow-[0.5rem_0.5rem_#F44336,-0.5rem_-0.5rem_#00BCD4]">
                    呆呆鱼
                </div>
            </div>
            <!-- 卡片 -->
            <div
                class="absolute select-none left-[20.3rem] top-0 flex w-[27.56rem] h-full flex-col items-center justify-center gap-[0.5em] px-[1em] py-[0.5em] ">
                <div class="w-full h-fit text-white gap-4 grid grid-cols-2">
                   <p>姓名：呆呆鱼</p>
                   <p>体重：56kg</p>
                   <p>爱好：派大星</p>
                   <p>简介：吃了睡，睡了吃</p>
                </div>
                <!-- 属性条 -->
                <div class="space-y-5 h-fit w-full my-4">
                    <el-progress :percentage="25" :show-text="false" status="success" />
                    <el-progress :percentage="45" :show-text="false" />
                    <el-progress :percentage="30" :show-text="false" status="warning" />
                    <el-progress :percentage="70" :show-text="false" status="exception" />
                </div>
                <!-- 属性条 -->
                <div class="space-y-2 h-fit w-full">
                    <div role="alert"
                        class="bg-green-100 dark:bg-green-900 border-l-8 border-green-500 dark:border-green-700 text-green-900 dark:text-green-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-green-200 dark:hover:bg-green-800 transform ">
                        <svg t="1724177167984" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="24812">
                            <path
                                d="M1008 847.530667l-83.029333 37.973333A856.746667 856.746667 0 0 1 629.333333 938.666667h-113.792c-34.474667 0-69.12-3.114667-103.04-9.258667l-143.872-26.197333A450.56 450.56 0 0 0 188.501333 896H21.333333c-7.509333 0-14.634667-1.536-21.333333-3.925333v25.258666c0 35.285333 28.714667 64 64 64h170.666667a21.333333 21.333333 0 0 0 21.333333-21.333333V938.666667h119.168c13.738667 0 26.666667 5.333333 36.437333 15.104a93.44 93.44 0 0 0 66.56 27.562666h184.490667c94.421333 0 184.405333-15.317333 267.477333-45.525333 43.946667-15.957333 72.618667-31.018667 87.637334-46.08A21.333333 21.333333 0 0 0 1024 874.666667v-38.272a64.426667 64.426667 0 0 1-16 11.136z"
                                p-id="24813" fill="#1afa29"></path>
                            <path
                                d="M682.666667 598.186667c-0.042667-1.194667 0.426667-2.261333 0.554666-3.456a328.96 328.96 0 0 0-33.792-22.272l-31.872 95.658666a21.333333 21.333333 0 0 1-40.448-13.525333l34.346667-102.997333-21.248-11.008a2839.936 2839.936 0 0 1-25.344-13.056l-32.64 97.877333a21.333333 21.333333 0 1 1-40.448-13.482667l35.114667-105.386666c-4.736-2.816-9.045333-5.674667-13.397334-8.533334l-71.765333 71.765334a21.248 21.248 0 0 1-30.165333 0 21.333333 21.333333 0 0 1 0-30.165334l69.162666-69.162666a57.130667 57.130667 0 0 1-5.077333-9.173334l-84.906667 28.288a21.333333 21.333333 0 0 1-13.482666-40.448l87.253333-29.098666A487.850667 487.850667 0 0 1 460.032 384H362.666667a21.333333 21.333333 0 1 1 0-42.666667h94.592c-0.512-13.653333-0.768-28.032-0.810667-42.666666H362.666667a21.333333 21.333333 0 1 1 0-42.666667h94.122666c0.298667-14.122667 0.725333-28.373333 1.365334-42.666667H362.666667a21.333333 21.333333 0 1 1 0-42.666666h97.706666a2193.493333 2193.493333 0 0 1 8.832-104.32 21.248 21.248 0 0 0-25.557333-23.253334C387.157333 54.869333 231.765333 85.333333 192 85.333333h-128a21.248 21.248 0 0 0-21.333333 22.485334c7.125333 134.485333 13.781333 361.216 1.152 397.184L41.472 512H64c26.922667 0 96.896 32.725333 158.165333 94.165333a401.749333 401.749333 0 0 1 117.930667 266.709334l80.042667 14.592c31.402667 5.632 63.488 8.533333 95.36 8.533333h74.325333c20.181333-17.536 100.522667-100.138667 92.842667-297.813333z"
                                p-id="24814" fill="#1afa29"></path>
                            <path
                                d="M63.957333 554.666667H27.946667C15.189333 597.888 0 658.688 0 704v128a21.333333 21.333333 0 0 0 21.333333 21.333333h167.168c17.578667 0 35.242667 1.28 52.778667 3.157334 11.690667 1.28 23.424 2.645333 34.986667 4.736l20.821333 3.797333C280.704 652.458667 94.762667 555.477333 63.957333 554.666667zM917.333333 618.666667c-32.554667 0-57.728 6.741333-79.957333 12.672-17.408 4.650667-32.426667 8.661333-48.042667 8.661333-23.082667 0-48.896-8.448-63.786666-14.165333-0.298667 141.610667-43.178667 225.536-76.928 269.312 87.893333-2.133333 175.146667-18.176 259.584-48.938667l82.048-37.504a20.693333 20.693333 0 0 0 6.186666-4.309333c0.512-0.512 0.810667-1.28 1.322667-1.792 17.536-18.773333 26.24-50.858667 26.24-98.602667 0-42.410667-36.650667-85.333333-106.666667-85.333333z"
                                p-id="24815" fill="#1afa29"></path>
                        </svg>
                        <p class="text-xs font-semibold ml-3">SD - 速度 ：25</p>
                    </div>
                    <div role="alert"
                        class="bg-blue-100 dark:bg-blue-900 border-l-8 border-blue-500 dark:border-blue-700 text-blue-900 dark:text-blue-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-blue-200 dark:hover:bg-blue-800 transform ">
                        <svg t="1724176668948" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5695">
                            <path
                                d="M511.340544 986.185728c-1.88416 0-3.731456-0.21504-5.543936-0.651264-51.41504-12.976128-234.653696-136.50944-339.146752-399.872-48.187392-121.585664-60.489728-257.55648-62.373888-350.21824-0.503808-25.546752 14.67392-49.850368 37.685248-60.526592 109.78304-50.927616 311.156736-137.080832 369.696768-137.302016 58.710016 0.169984 259.19488 86.071296 368.39424 136.849408 20.41856 9.445376 37.900288 37.599232 37.443584 60.237824-1.91488 93.298688-14.352384 229.943296-62.521344 351.008768-98.308096 247.158784-279.072768 384.239616-337.885184 399.7696-1.86368 0.487424-3.833856 0.704512-5.748736 0.704512z"
                                fill="#1296db" p-id="5696"></path>
                        </svg>
                        <p class="text-xs font-semibold ml-3">
                            DF - 防御 ：45
                        </p>
                    </div>
                    <div role="alert"
                        class="bg-yellow-100 dark:bg-yellow-900 border-l-8 border-yellow-500 dark:border-yellow-700 text-yellow-900 dark:text-yellow-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-yellow-200 dark:hover:bg-yellow-800 transform ">
                        <svg t="1724176981821" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="17161">
                            <path
                                d="M960 328.533333c17.066667-21.333333 29.866667-115.2 21.333333-153.6-8.533333-51.2-34.133333-106.666667-132.266666-153.6-132.266667-51.2-192 59.733333-192 59.733334-29.866667 51.2-76.8 162.133333 132.266666 209.066666 0 0 25.6 17.066667 8.533334 34.133334-12.8 21.333333-157.866667 226.133333-183.466667 285.866666-25.6 64-12.8-145.066667-273.066667-247.466666-256-102.4-328.533333 226.133333-290.133333 332.8C98.133333 836.266667 273.066667 938.666667 554.666667 998.4c81.066667 34.133333 140.8 8.533333 140.8 8.533333s200.533333-72.533333 243.2-320c8.533333-170.666667-8.533333-311.466667 0-328.533333 0-12.8 0-12.8 21.333333-29.866667z"
                                fill="#f4ea2a" p-id="17162"></path>
                        </svg>
                        <p class="text-xs font-semibold ml-3">SR - 力量 ：30</p>
                    </div>
                    <div role="alert"
                        class="bg-red-100 dark:bg-red-900 border-l-8 border-red-500 dark:border-red-700 text-red-900 dark:text-red-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-red-200 dark:hover:bg-red-800 transform ">
                        <svg t="1724176545528" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4450">
                            <path
                                d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
                                fill="#E5404F" p-id="4451"></path>
                        </svg>
                        <p class="text-xs font-semibold ml-3">HP - 血量 ：70</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { onMounted, ref } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import addLight from '../helpers/base/light';

const emit = defineEmits(['showName'])
const playerRef = ref({} as HTMLElement)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(10, 384 / 384, 1, 500)
camera.position.set(-6, 61, 465)
camera.lookAt(0, 0, 0)
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
});
renderer.setSize(384, 384);
renderer.render(scene, camera);
const loader = new GLTFLoader().setPath('/models/')
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')
loader.setDRACOLoader(dracoLoader)
// const controls = new OrbitControls(camera, renderer.domElement);
// controls.addEventListener('change', function () {
//     renderer.render(scene, camera)
// })
onMounted(() => {
    addLight(scene)
    loader.load('fish.glb', (gltf) => {
        gltf.scene.scale.set(40, 40, 40)
        gltf.scene.translateY(-15)
        gltf.scene.traverse(function (object) {
            if (object instanceof THREE.Mesh) {
                object.castShadow = true
            }
        })
        scene.add(gltf.scene)
        const mixer = new THREE.AnimationMixer(gltf.scene);
        const clipAction = mixer.clipAction(gltf.animations[4]);
        clipAction.play(); //播放动画
        const clock = new THREE.Clock();
        function loop() {
            requestAnimationFrame(loop);
            const frameT = clock.getDelta();
            mixer.update(frameT);
        }
        loop();
    })
    playerRef.value.appendChild(renderer.domElement);
})
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

</script>
<style scoped>
.box {
    background: url("../assets/imgs/border.png") no-repeat center center;
}

/* 设置滚动条轨道的样式 */
.scrollable::-webkit-scrollbar {
    width: 3px;
}

/* 设置滚动条滑块的样式 */
.scrollable::-webkit-scrollbar-thumb {
    background-color: #dedcdc;
    border-radius: 5px;
}

/* 鼠标悬停在滑块上时的样式 */
.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: rgb(199, 195, 195);
}
</style>
